<template>
  <t-tabs v-model="tabValue" size="medium">
    <t-tab-panel style="height: 60vh" :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="1" label="科普基地详情">
      <t-form labelWidth="160px" :colon="true">
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="6">
            <t-card class="step-card" size="small" title="基本信息">
              <t-form-item label="科普站名称" name="name">
                {{ data.name }}
              </t-form-item>
              <t-form-item label="科普站地址" name="address">
                {{ data.address }}
              </t-form-item>
              <t-form-item label="通讯地址" name="communicateAddress">
                {{ data.communicateAddress }}
              </t-form-item>
              <t-form-item label="邮编" name="postCode">
                {{ data.postCode }}
              </t-form-item>
              <t-form-item label="法定代表人" name="legalPerson">
                {{ data.legalPerson }}
              </t-form-item>
              <t-form-item label="申报单位" name="declareDeptName">
                {{ data.declareDeptName }}
              </t-form-item>
              <t-form-item label="联系人" name="linkerPerson">
                {{ data.linkerPerson }}
              </t-form-item>
              <t-form-item label="移动电话" name="mobilePhone">
                {{ data.mobilePhone }}
              </t-form-item>
              <t-form-item label="固定电话" name="fixedPhone">
                {{ data.fixedPhone }}
              </t-form-item>
              <t-form-item label="传真" name="fax">
                {{ data.fax }}
              </t-form-item>
              <t-form-item label="公共邮箱" name="email">
                {{ data.email }}
              </t-form-item>
              <t-form-item label="基地类型" name="baseType">
                {{ data.baseType | filterByDict(dict.type.base_type) }}
              </t-form-item>
              <t-form-item label="制度、规划或计划" name="workPlan">

                <div v-for="(item, index) in fileLists" :key="index" v-show="fileLists && fileLists.length > 0">
                  <a class="t-button-link" target="_blank" :href="item.url">
                    {{ item.name }}
                  </a>
                </div>
                <div v-show="!fileLists || fileLists.length <= 0">无</div>
              </t-form-item>
            </t-card>
          </t-col>
          <t-col :span="6">
            <t-card class="step-card" size="small" title="交通运输科普展示场所" style="margin-bottom: 15px;">
              <t-form-item label="室内场馆面积" name="indoorVenues">
                {{ data.indoorVenues }} ㎡
              </t-form-item>
              <t-form-item label="室外场馆面积" name="outdoorVenues">
                {{ data.outdoorVenues }} ㎡
              </t-form-item>
              <t-form-item label="影视报告厅面积" name="lectureHall">
                {{ data.lectureHall }} ㎡
              </t-form-item>
              <t-form-item label="每年对外开放时间" name="openDays">
                {{ data.openDays }} 天
              </t-form-item>
              <t-form-item label="每年接待公众" name="receptionPerson">
                {{ data.receptionPerson }} 人次
              </t-form-item>
            </t-card>
          </t-col>
        </t-row>
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="6">
            <t-card class="step-card" size="small" title="交通运输科普经费年度投入情况" style="margin-bottom: 15px;">
              <t-form-item label="政府投资" name="popularScienceFunding.governmentInvest">
                {{ data.popularScienceFunding.governmentInvest }} 万元
              </t-form-item>
              <t-form-item label="社会赞助" name="popularScienceFunding.socialSponsorship">
                {{ data.popularScienceFunding.socialSponsorship }} 万元
              </t-form-item>
              <t-form-item label="单位自筹" name="popularScienceFunding.unitSelf">
                {{ data.popularScienceFunding.unitSelf }} 万元
              </t-form-item>
              <t-form-item label="其他" name="popularScienceFunding.other">
                {{ data.popularScienceFunding.other }} 万元
              </t-form-item>
            </t-card>
          </t-col>
          <t-col :span="6">
            <t-card class="step-card" size="small" title="基地对外宣传渠道">

              <t-form-item label="渠道类型" name="popularScienceBaseChannel" labelAlign="top">

                <div style="display: flex;flex-direction: column;">
                  <div style="display: flex;align-items: center;margin-top: 20px;">

                    <t-radio-group v-model="data.popularScienceBaseChannel.webSite">
                      <t-radio value="1" allow-uncheck disabled>网站</t-radio>
                    </t-radio-group>

                    <t-radio-group v-model="data.popularScienceBaseChannel.web">
                      <t-radio value="1" allow-uncheck disabled>网页</t-radio>
                    </t-radio-group>
                    <span>网址：{{ data.popularScienceBaseChannel.url }}</span>

                  </div>

                  <div style="display: flex;align-items: center;margin-top: 20px;">
                    <t-radio-group v-model="data.popularScienceBaseChannel.webo">
                      <t-radio value="1" allow-uncheck disabled>微博</t-radio>
                    </t-radio-group>
                    <t-radio-group v-model="data.popularScienceBaseChannel.weChat">
                      <t-radio value="1" allow-uncheck disabled>微信</t-radio>
                    </t-radio-group>
                    <t-radio-group v-model="data.popularScienceBaseChannel.otherr">
                      <t-radio value="1" allow-uncheck disabled>其他客户端</t-radio>
                    </t-radio-group>
                    <span>名称：{{ data.popularScienceBaseChannel.otherClientName }}</span>

                  </div>
                </div>
              </t-form-item>




              <!-- <t-form-item label="渠道类型" name="popularScienceBaseChannel.channelType" labelAlign="top">
                <t-radio-group name="city" v-model="data.popularScienceBaseChannel.channelType" disabled
                  :options="dict.type.channel_type" />
              </t-form-item>
              <div>
                <t-form-item v-if="['1', '2'].includes(data.popularScienceBaseChannel.channelType)" label="网址"
                  name="popularScienceBaseChannel.url" key="channelType12">
                  {{ data.popularScienceBaseChannel.url || data.popularScienceBaseChannel.otherClientName }}
                </t-form-item>
                <t-form-item v-if="['3', '4', '5'].includes(data.popularScienceBaseChannel.channelType)" label="名称"
                  name="popularScienceBaseChannel.otherClientName" key="channelType5">
                  {{ data.popularScienceBaseChannel.url || data.popularScienceBaseChannel.otherClientName }}
                </t-form-item>
              </div> -->
            </t-card>
          </t-col>
        </t-row>
        <t-row :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="科普工作人员情况">
              <base-member v-model="data.popularScienceWorkers"></base-member>
            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel style="height: 60vh" :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="2" label="总体概况">
      <t-form labelWidth="140px">
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="基地总体概况（包括申报单位简介、基地科普特色、基地创建历程、发展愿景等，不超过1000字）">
              <inner-html :content="data.popularScienceBaseSurvey?.survey"></inner-html>

            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel style="height: 60vh" :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="3" label="内容体系">
      <t-form labelWidth="140px">
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="交通运输科普展示内容体系（不超过1000字，要求层次清晰）">
              <inner-html :content="data.popularScienceBaseContent?.content"></inner-html>
            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel style="height: 60vh" :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="4" label="特色照片">
      <t-form labelWidth="140px">
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="列出展示基地交通运输科普特色照片一套（不超过10张），并在每张照片下面做简要说明（不超过50字）">
              <base-image v-model="data.popularScienceBasePictures" ref="base-image"></base-image>
            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel style="height: 60vh" :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="5" label="宣传品">
      <t-form labelWidth="140px">
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="列出基地为公众提供的交通运输科普宣传品清单（限5种以内，并附样品一套）">
              <base-publicity ref="base-publicity" v-model="data.popularScienceBasePublicitys"
                :editOpen="false"></base-publicity>
            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel style="height: 60vh" :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="6" label="科普说词">
      <t-form labelWidth="140px">
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="基地交通运输科普解说词一套（不超过2000字）">
              <inner-html :content="data.popularScienceBaseCommentary?.commentary"></inner-html>

            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel style="height: 60vh" :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="7" label="嘉奖情况">
      <t-form labelWidth="140px">
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="获国家、省部级和国际组织嘉奖情况（如有，提供相关证明，并为每张证书做50字以内的简要介绍）">
              <base-reward ref="base-reward" v-model="data.popularScienceBaseRewards" :editOpen="false"></base-reward>
            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel style="height: 60vh" :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="8" label="典型活动">
      <t-form labelWidth="140px">
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="列出近三年来基地交通运输科普典型活动清单（限10个以内），同时提交开展的典型科普活动现场视频（时长5分钟以内）">
              <base-activity ref="base-activity" v-model="data.popularScienceBaseActivitys"
                :editOpen="false"></base-activity>
            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel style="height: 60vh" :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="9" label="附件信息">
      <t-form labelWidth="140px">
        <t-row style="align-items: stretch;" :gutter="14">
          <t-col :span="12">
            <t-table row-key="id" :columns="projectFileColumns" :data="projectFileData">
              <template #id="{ row, rowIndex }">
                {{ rowIndex + 1 }}
              </template>
              <template #fileList="{ row }">
                <div style="display: flex; flex-direction: column">
                  <a v-for="file in row.fileLists" :key="file.id" class="t-button-link" :href="`${file.fullFilePath}`"
                    target="_blank">{{ file.name }}</a>
                </div>
              </template>
            </t-table>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
  </t-tabs>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import baseActivity from "./base-activity.vue";
import baseReward from "./base-reward.vue";
import basePublicity from "./base-publicity.vue";
import baseImage from "./base-image.vue";
import baseMember from "./base-member.vue";
import InnerHtml from "@/components/InnerHtml/index.vue";
import { getFiles } from "@/api/common";

export default {
  name: "base-detail",
  dicts: ['base_type', 'channel_type', 'worker_type', 'education', 'prof_tit'],
  components: {
    baseActivity,
    baseReward,
    basePublicity,
    baseImage,
    baseMember,
    InnerHtml
  },
  props: {
    objId: [String, Number],
    reviewOpen: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      tabValue: '1',
      fileLists: null,
      data: {
        name: undefined,
        address: undefined,
        communicateAddress: undefined,
        postCode: undefined,
        legalPerson: undefined,
        linkerPerson: undefined,
        mobilePhone: undefined,
        fixedPhone: undefined,
        fax: undefined,
        email: undefined,
        baseType: undefined,
        workPlan: undefined,
        indoorVenues: undefined,
        outdoorVenues: undefined,
        lectureHall: undefined,
        openDays: undefined,
        receptionPerson: undefined,
        popularScienceWorkers: [],
        popularScienceFunding: {
          governmentInvest: undefined,
          socialSponsorship: undefined,
          unitSelf: undefined,
          other: undefined,
        },
        popularScienceBaseChannel: {
          webSite: 0,
          web: 0,
          webo: 0,
          weChat: 0,
          otherr: 0,
          url: undefined,
          otherClientName: undefined,
        },
        popularScienceBaseSurvey: {

        },
        popularScienceBaseContent: {

        },
        popularScienceBasePictures: [],
        popularScienceBasePublicitys: [],
        popularScienceBaseCommentary: {},
        popularScienceBaseRewards: [],
        popularScienceBaseActivitys: [],
      },

      projectFileData: [
        {
          id: 1,
          c1: '盖章后的申报书',
          c2: '否',
          moduleKey: 'kpzhsbs',
          fileIds: [],
          fileLists: [],
        },
      ],
      projectFileColumns: [
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "c1",
          title: "附件名称",
          align: "center",
        },
        // {
        //   colKey: "c2",
        //   title: "是否必需",
        //   align: "center",
        // },
        // {
        //   colKey: "op",
        //   title: "操作",
        //   align: "left",
        // },
        {
          colKey: "fileList",
          title: "附件列表",
          align: "left",
        },
      ],
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler (val) {
        if (val) {
          this.getObj(val);
        }
      }
    },
  },
  methods: {
    getObj () {
      this.$api.kpzh.base.getAll(this.objId).then(response => {
        if (response.data.createUserId === Number(this.$store.state.user.userId)) {
          this.isMyProject = true;
        }
        Object.assign(this.data, response.data);
        if (response.data.workPlan == 1) {
          getFiles(response.data.id).then((res) => {
            const files = []
            console.log("2", res)
            res.data.forEach((item) => {
              files.push({
                name: item.fileName,
                url: item.fullFilePath,
                id: item.id,
                filePath: item.filePath
              })
            })
            this.fileLists = files;
          }).catch((e) => {
            this.$message.error(e.toString());
          });
        } else {
          this.fileLists = null
        }
        // 附件信息
        this.getFiles()
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getFiles () {
      getFiles(this.objId).then((res) => {
        const files = {}
        console.log("1", res)
        res.data.forEach((item) => {
          if (!files[item.moduleKey]) {
            files[item.moduleKey] = []
          }
          files[item.moduleKey].push({
            name: item.fileName,
            url: item.fullFilePath,
            id: item.id,
            filePath: item.filePath
          })
        })
        const fileLists = []
        console.log("3", this.projectFileData)
        this.projectFileData.forEach((val, index) => {
          this.projectFileData[index].fileLists = files[val.moduleKey] || [];
          this.projectFileData[index].fileIds = files[val.moduleKey]?.map(val => val.id) || [];
          fileLists.push(...this.projectFileData[index].fileIds)
        })
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }
  }
}
</script>

<style lang="less" scoped>
.t-tab-panel {
  padding: 10px;
}

.tab-panel {
  height: calc(65vh - 64px);
  overflow: scroll;
}

.tab-full-panel {
  height: calc(80vh - 64px);
  overflow: scroll;
}

.t-form__item {
  margin-bottom: 6px
}

.t-row {
  margin-bottom: 14px;
}

.step-card {
  height: 100%;
  margin-bottom: 14px;
}
</style>
